<template>
  <div class="wt-tab">
    <div class="tab">
      <div style="height:0.44rem;overflow:hidden">
        <ul>
        <li
          v-for="(item, index) in tableData"
          :key="index"
          @click="handle(item, index)"
          :class="{ active: active == index }"
        >
          {{ item.warehouseTypeName }}
        </li>
      </ul>
      </div>
      <div v-if="tableData.length > 0">
        <div
          class="content"
          v-for="(g, j) in tableData[active].wmsWarehouseTypeListVoList"
          :key="j"
        >
          <div style="margin: 0.16rem 0">{{ g.warehouseName }}</div>
          <div class="cont-flex">
            <div class="row">
              <span class="r-label">合格品</span>
              <span class="r-column"
                >{{ commafy(g.qualifiedNum) }}{{ g.basicUnit }}</span
              >
            </div>
            <div class="row">
              <span class="r-label">报废品</span>
              <span class="r-column"
                >{{ commafy(g.scrapNum) }}{{ g.basicUnit }}</span
              >
            </div>
          </div>
          <div class="cont-flex">
            <div class="row">
              <span class="r-label">合格品(F)</span>
              <span class="r-column"
                >{{ g.qualifiedNumTextAssistUnit||'--' }}</span
              >
            </div>
            <div class="row">
              <span class="r-label">报废品(F)</span>
              <span class="r-column"
                >{{ g.scrapNumTextAssistUnit||'--' }}</span
              >
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { commafy } from "@/utils/util";

export default {
  name: "van-tab",
  props: {
    dataSource: {
      type: Array,
      default: () => {
        return [];
      },
    },
    currIndex: {
      type: Number | String,
      default: () => {
        return 0;
      },
    },
  },
  data() {
    return {
      active: 0,
      commafy,
      tableData: []
    };
  },
  watch: {
    dataSource(v) {
      this.tableData = v
    }
  },
  created() {
    this.active = this._props.currIndex;
  },
  methods: {
    handle(item, index) {
      this.active = index;
      this.$emit("handle", item, index);
    },
  },
};
</script>
<style lang="scss" scoped>
.wt-tab {
  width: 100%;
  .tab {
    //  border-bottom: 1px solid #ebebeb;
    &::after {
      transform: scaleY(0.5);
      height: 0.01rem;
      content: "";
      display: block;
    }
    ul {
      background: #fff;
      padding: 0 0.16rem 0.1rem!important;
      margin: 0;
      font-size: 0.14rem;
      width: 100%;
      height: 0.54rem;
      white-space: nowrap;
      overflow-x: scroll;
      overflow-y: hidden;
      li {
        display: inline-block;
        width: auto;
        height: 0.44rem;
        line-height: 0.44rem;
        color: #191f25;
        margin-right: 0.4rem;
        &.active {
          border-bottom: 0.02rem solid #1890ff;
          margin-bottom: -0.01rem;
          color: #1890ff;
        }
      }
    }
    .content {
      margin-top: 0.1rem;
      display: flex;
      justify-content: space-between;
      flex-direction: column;
      background: #fff;
      padding: 0 0.16rem;
      .cont-flex {
        width: 100%;
        display: flex;
        justify-content: space-between;
        border-bottom: #ffffff solid 0.01rem;
        padding-bottom: 0.16rem;
        .row {
          width: 50%;
          font-size: 0.14rem;
          font-family: PingFang SC;
          font-weight: 400;
          .r-label {
            color: #888888;
            display: block;
            width: 0.7rem;
          }
          .r-column {
            display: block;
            color: #191f25;
            width: 2.5rem;
            margin-top: 0.1rem;
          }
        }
      }
    }
  }
}
</style>